<script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import PageHeader from "@/components/PageHeader.vue";
  import Coupon from "@/components/Coupon.vue";
  import Empty from "@/components/Empty.vue";
  import {getCouponListApi, myCouponApi} from "@/api";
  const route = useRoute();
  const pageType = ref();
  const couponList = ref([]);
  const getCouponList = () => {
    if (pageType.value === 'my') {
      myCouponApi().then(res => {
        couponList.value = res.data
      })
    } else {
      getCouponListApi().then(res => {
        couponList.value = res
      })
    }
  }
  onMounted(() => {
    pageType.value = route.query.type
    getCouponList();
  })
</script>

<template>
  <div class="coupon-page">
    <PageHeader/>
    <div class="coupon-list" v-if="couponList.length">
      <Coupon
        :type="pageType"
        class="coupon"
        v-for="(coupon, index) in couponList"
        :key="index"
        :coupon="coupon"
      />
    </div>
    <Empty img="topup" description="您还没有优惠券~" v-else/>
  </div>
</template>

<style scoped lang="scss">
  .coupon-page {
    padding: 40px 10px;
    .coupon-list {
      display: grid;
      grid-gap: 20px;
      /* 根据容器宽度自动填充列 */
      grid-template-columns: repeat(auto-fill, minmax(150px, 6fr));
      .coupon {
        margin-right: 0 !important;
      }
    }
  }
</style>